<html>

<head>
  <script src="/dist/tesseract.min.js"></script>
  <style>
    .column {
      float: left;
      width: 20%;
      padding: 5px;
    }
  </style>
</head>

<body>

  <div class="row" id="imgRow">
    <div class="column">
      <p>Input Image</p>
      <img style="max-width:500px;">
    </div>
    <div class="column">
      <p>Rotated, Original Color</p>
      <img style="max-width:500px;">
    </div>
    <div class="column">
      <p>Rotated, Grey</p>
      <img style="max-width:500px;">
    </div>
    <div class="column">
      <p>Rotated, Binary</p>
      <img style="max-width:500px;">
    </div>
  </div>

  <script>
    const recognize = async () => {

      const element = document.getElementById("imgRow");

      const worker = await Tesseract.createWorker('eng', 0, {
        // corePath: '/tesseract-core-simd.wasm.js',
        workerPath: "/dist/worker.min.js"
      });

      const fileArr = ["../data/meditations.jpg", "../data/tyger.jpg", "../data/testocr.png"];
      let timeTotal = 0;

      let lastElement = element;

      for (let file of fileArr) {
        for (let rad of [-0.2, -0.1, 0.1, 0.2]) {
          const newElement = element.cloneNode(true);

          // Create the rotated images
          const ret1 = await worker.recognize(file, { rotateRadians: rad }, { text: false, blocks: false, hocr: false, tsv: false, imageColor: true });

          newElement.children[0].children[1].src = ret1.data.imageColor;

          // Attempt to remove the rotation using the auto-rotate feature
          const ret2 = await worker.recognize(ret1.data.imageColor, { rotateAuto: true }, { text: false, blocks: false, hocr: false, tsv: false, imageColor: true, imageGrey: true, imageBinary: true, debug: true });

          newElement.children[1].children[1].src = ret2.data.imageColor;
          newElement.children[2].children[1].src = ret2.data.imageGrey;
          newElement.children[3].children[1].src = ret2.data.imageBinary;

          lastElement.after(newElement);
          lastElement = newElement;

        }
      }
    }

    recognize();

  </script>
</body>

</html>